<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=0.5" />
    <title>Document</title>
    <style>
      canvas {
        display: block;
        border: 1px dashed #666;
        margin: 0px auto;
      }
    </style>
  </head>
  <body>
    <canvas width="1200" height="700"></canvas>
    <script src="./global.js"></script>
    <script src="./game.js"></script>
    <script src="./map.js"></script>
    <script src="./cloud.js"></script>
    <script src="./Bird.js"></script>
    <script src="./tree.js"></script>
    <script src="./obstacle.js"></script>
    <script src="./Dinosaur.js"></script>
    <script>
      imgSprite.onload = function () {
        let game = new Game();
        let map = new Map(ctx);
        let cloud = new Cloud(ctx);
        let obstacle = new Obstacle(ctx);
        let dinosaur = new Dinosaur();
        cloud.addCloud();
        obstacle.addObstacle();

        game.add(map); // 地图
        game.add(cloud); // 云彩
        game.add(dinosaur); // 恐龙
        game.add(obstacle); // 障碍物

        function start() {
          game.start();
          // 碰撞检测
          obstacle.list.forEach((v) => {
            if (isCollision(v, dinosaur)) {
              dinosaur.red = true;
              console.log("dinosaur.red:", dinosaur.red);
              v.red = true;
              game.status = 'end';

            } else {
              v.red = false;
              dinosaur.red = false;
            }
          });
          if (game.status !== 'end') {
            requestAnimationFrame(start);
          }         
        }

        start();

        window.onkeydown = function (e) {
          console.log(e); //code: "Space"
          if (e.code === "Space") {
            dinosaur.jump();
          }
        };
      };
    </script>
  </body>
</html>
